<template>
  <div class="container" ref="mainCon">
    <el-row
      class="topContent"
      :class="
        statusQuery == 'REJECTED'
          ? 'topContent topContentRejected'
          : 'topContent'
      "
    >
      <div :class="statusQuery == 'REJECTED' ? 'rejectedSty' : 'statuSty'">
        <el-col :span="16" class="fl">
          <div>
            <span class="titleTop">
              <i class="icon iconfont iconfanhui1" @click="goBack"></i>
              {{ `${yearQuery}年${monthQuery}月第${batchNo}批次工资` }}
            </span>
            <span class="payOffState unPay" v-show="statusQuery == 'NO_PAY'"
              >待支付</span
            >
            <span class="payOffState annuled" v-show="statusQuery == 'CANCELED'"
              >已取消</span
            >
            <span
              class="payOffState payOffWait"
              v-show="statusQuery == 'NO_ISSUE'"
              >待发放</span
            >
            <span class="payOffState issued" v-show="statusQuery == 'ISSUED'"
              >已发放</span
            >
            <span class="payOffState payFail" v-show="statusQuery == 'FAILURE'"
              >发放失败</span
            >
            <span class="payOffState issued" v-show="statusQuery == 'REJECTED'"
              >已驳回</span
            >
            <span class="payOffState issued" v-show="statusQuery == 'SG_AUDIT'"
              >待施工方审核</span
            >
            <span
              class="payOffState issued"
              v-show="statusQuery == 'OWER_AUDIT'"
              >待建设方审核</span
            >
            <span class="payOffState issued" v-show="statusQuery == 'JC_AUDIT'"
              >待劳动监察审核</span
            >
            <span class="payOffState unPay" v-show="statusQuery == 'CONFIRMED'"
              >待提交</span
            >
          </div>
          <div class="rejectedReason" v-if="statusQuery == 'REJECTED'">
            驳回原因：{{ rejectReason || '--' }}
          </div>
        </el-col>
        <!-- 审核和详情公用一个页面，审核页面跳过来有审核，驳回按钮，详情页面跳过来无操作 -->
        <el-col :span="8" class="opetateBut">
          <!-- 施工方（项目账号/企业账号）待施工方审核
            建设方（项目账号/企业账号）待建设方审核
            监察 待劳动监察审核 有审核，驳回操作-->
          <div
            v-if="
              ((userType === 'PROJECT_ADMINISTRATOR' ||
                (userType === 'COMPANY' && sysAppCode === 'constructor')) &&
                statusQuery === 'SG_AUDIT') ||
              ((userType === 'PROJECT_OWNER' ||
                (userType === 'COMPANY' && sysAppCode === 'owner')) &&
                statusQuery === 'OWER_AUDIT') ||
              (userType === 'MONITOR' && statusQuery === 'JC_AUDIT')
            "
          >
            <el-button
              @click="toCheckEvent()"
              class="commonBut saveBtn funComBut check"
            >
              审核通过
            </el-button>
            <el-button
              @click="toRefused()"
              class="commonBut saveBtn funComBut reject"
            >
              驳回
            </el-button>
          </div>
        </el-col>
        <el-col :span="8" class="alignRight">
          <div>
            <el-button
              v-show="
                statusQuery == 'NO_ISSUE' && userType == 'BANK' && isEsUser()
              "
              class="commonBut saveBtn funComBut"
              @click="submitForm()"
              >确认发放</el-button
            >
          </div>
        </el-col>
      </div>
    </el-row>
    <div
      :class="statusQuery == 'REJECTED' ? 'mainCon mainConRejected' : 'mainCon'"
    >
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="参建单位" class="row-padding-bottom">
              <el-select
                v-model="filterField.uscc"
                filterable
                placeholder="请选择"
                clearable
                @change="getUSCC"
                :disabled="isFenbaoManager"
              >
                <el-option
                  v-for="item in companyOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="班组" class="row-padding-bottom">
              <el-select
                v-model="filterField.groupId"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in groupIdOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="发放状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in salaryStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="员工确认状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.confirmStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in employeeStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="姓名" class="row-padding-bottom">
                <el-input
                  v-model="filterField.name"
                  placeholder="请输入姓名"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item label="">
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-show="loginType == 'JC'">
        <ul class="statistics clearfix">
          <li class="name">统计数据</li>
          <li>
            应发工资总人数:<span class="fontColorTheme"
              >{{ salaryStatistics.salaryEmpTotal }}人</span
            >
          </li>
          <li>
            实名制考勤人数:<span class="fontColorTheme"
              >{{ salaryStatistics.salaryAttEmpTotal }}人</span
            >
          </li>
          <li>
            占比:<span class="fontColorTheme">{{
              salaryStatistics.salaryAttRate
            }}</span>
          </li>
          <li>
            实名制合同签订人数:<span class="fontColorTheme"
              >{{ salaryStatistics.salaryConEmpTotal }}人</span
            >
          </li>
          <li>
            占比:<span class="fontColorTheme">{{
              salaryStatistics.salaryConRate
            }}</span>
          </li>
        </ul>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div class="colSetupBottom">
          <colSetup
            :tableColList="colSetupTableCol"
            @getSelectMenuId="getSelectMenuId"
            style="display: inline-block; vertical-align: inherit"
          ></colSetup>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="exportSalaryPayBatchList"
          >
            <span class="opetareText">导出</span>
          </el-button>
          <el-button
            v-if="statusQuery == 'NO_ISSUE' && syncSalaryBtn"
            class="commonBut saveBtn funComBut"
            @click="toSyncSalary"
            :loading="canSync"
          >
            <span>刷新数据</span>
          </el-button>
          <el-tooltip
            v-if="statusQuery == 'NO_ISSUE' && syncSalaryBtn"
            content="Top center"
            placement="top"
            effect="dark"
          >
            <div slot="content">获取最新工资表数据</div>
            <i class="icon iconfont iconhuabanfuben"></i>
          </el-tooltip>
        </div>
        <!-- isException为1，对工资表中部分标红人员当前行进行标红 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          :cell-style="rowStyle"
        >
          <el-table-column
            type="index"
            width="80px"
            label="序号"
            align="center"
          ></el-table-column>
          <template v-for="(item, index) in tableCol">
            <el-table-column
              :prop="item.prop"
              width="230"
              :label="item.label"
              v-if="item.isShow && item.prop == 'companyName'"
              :key="index"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.companyName"
                  :columnName="'companyName'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow && item.prop == 'groupName'"
              width="140px"
              :key="index"
              align="center"
              :formatter="formatTd"
            >
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow && item.prop == 'account'"
              width="180px"
              :key="index"
              align="center"
              :formatter="formatTd"
            >
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow && item.prop == 'name'"
              width="140px"
              :key="index"
              align="center"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="loginType == 'JC'"
                  type="primary"
                  @click="seeEmployeeDetail(scope.row.employeeId)"
                  >{{ scope.row.name }}</el-link
                >
                <span v-else>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow && item.prop == 'idcard'"
              width="180px"
              :key="index"
              align="center"
              :formatter="formatTd"
            >
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow && item.prop == 'attTotal'"
              min-width="120px"
              :key="index"
              align="center"
              :formatter="formatTd"
              sortable="custom"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="loginType == 'JC'"
                  type="primary"
                  @click="seeEmployeeAttendance(scope.row)"
                  >{{ scope.row.attTotal }}</el-link
                >
                <span v-else>{{ scope.row.attTotal }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow && item.prop == 'remark'"
              width="230"
              :key="index"
              align="center"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <span v-if="!scope.row.remarkremark">--</span>
                <copyText
                  v-else
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.remark"
                  :columnName="'remark'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              width="230px"
              v-else-if="item.isShow && item.prop == 'bankFailureRemark'"
              :key="index"
              align="center"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <span v-if="!scope.row.bankFailureRemark">--</span>
                <copyText
                  v-else
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.bankFailureRemark"
                  :columnName="'bankFailureRemark'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-else-if="item.isShow"
              min-width="120px"
              :key="index"
              align="center"
              :formatter="formatTd"
              :sortable="
                ['shouldPay', 'bankActPay'].includes(item.prop)
                  ? 'custom'
                  : false
              "
            >
            </el-table-column>
          </template>

          <!-- <el-table-column label="参建单位" width='230'>
            <template slot-scope="scope">
                <copyText :tableIndex='scope.$index' :copyTextName='scope.row.companyName' :columnName="'companyName'"></copyText>
            </template>
        </el-table-column>
        <el-table-column prop="groupName" label="班组" align="center" :formatter=formatTd width="140px"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" :formatter=formatTd>
          <template  slot-scope="scope">
              <el-link v-if="loginType == 'JC'" @click="seeEmployeeDetail(scope.row.employeeId)">{{scope.row.name}}</el-link>
              <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="idcard" label="身份证号" align="center" :formatter=formatTd width="180px"></el-table-column>
        <el-table-column prop="attTotal" label="考勤天数" align="center" :formatter=formatTd width="150">
          <template  slot-scope="scope">
              <el-link v-if="loginType == 'JC'" @click="seeEmployeeAttendance(scope.row)">{{scope.row.attTotal}}</el-link>
              <span v-else>{{scope.row.attTotal}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="手机号" align="center" :formatter=formatTd width="150"></el-table-column>
        <el-table-column prop="shouldPay" label="应发工资(元)" align="center" :formatter=formatTd  width="200"></el-table-column>
      
        <el-table-column prop="bankActPay" label="到账工资(元)" align="center" :formatter=formatTd></el-table-column>
        <el-table-column prop="statusDesc" label="工资发放状态" align="center" :formatter=formatTd></el-table-column>
        <el-table-column prop="confirmStatusDesc" label="员工确认状态" align="center" :formatter=formatTd></el-table-column>
        <el-table-column label="备注" width='230' align="center" prop="remark">
            <template slot-scope="scope">
                <span v-if="!scope.row.remarkremark">--</span>
                <copyText v-else :tableIndex='scope.$index' :copyTextName='scope.row.remark' :columnName="'remark'"></copyText>
            </template>
        </el-table-column>
        <el-table-column prop="bankFailureRemark" label="发放失败提示" align="center" :formatter=formatTd width="230px">
           <template slot-scope="scope">
                <span v-if="!scope.row.bankFailureRemark">--</span>
                <copyText v-else :tableIndex='scope.$index' :copyTextName='scope.row.bankFailureRemark' :columnName="'bankFailureRemark'"></copyText>
            </template>
        </el-table-column> -->
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- 驳回弹窗 -->
      <dialogRefused
        :showTaskProp="showTask"
        @callback="handleCloseArea"
        :salaryId="salaryId"
        @getStatusQuery="getStatusQuery(arguments)"
      />

      <!-- 考勤明细弹框 -->
      <el-dialog
        title="考勤明细"
        :visible.sync="formVisible"
        :append-to-body="true"
        :close-on-click-modal="false"
        @close="closeDialog"
        width="900px"
        :modal-append-to-body="false"
      >
        <el-row class="toolbar mrT8" style="padding-bottom: 0">
          <el-form :inline="true" label-width="100px" ref="searchConditions">
            <el-form-item
              label="状态"
              label-width="42px"
              class="row-padding-bottom"
            >
              <el-select
                v-model="drawerfilterField.inRange"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in inrangeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" class="row-padding-bottom">
              <el-select
                v-model="drawerfilterField.direction"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in directionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 8px">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchBrand"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-table
          :data="drawerTableList"
          v-loading="drawerLoading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column prop="punchTime" label="打卡日期" align="center" :formatter=formatTd></el-table-column> -->
          <el-table-column
            prop="punchTime"
            label="打卡时间"
            align="center"
            width="170"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="打卡地址"
            align="center"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.address"
                :columnName="'address'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            property="path"
            label="打卡图片"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.path"
                style="width: 50px; height: 50px"
                :src="scope.row.path"
                :preview-src-list="scope.row.list"
              >
              </el-image>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="inRange"
            label="状态"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.inRange == 1" class="successColor"
                >范围内</span
              >
              <span v-else class="errorColor">范围外</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="direction"
            label="方向"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <!-- {{scope.row.direction =="1"?"进场":"出场"}} -->
              <span v-if="scope.row.direction == 1">进场</span>
              <span v-else-if="scope.row.direction == 0">出场</span>
              <span v-else>无方向</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="attType"
            label="打卡方式"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <div slot="empty" v-show="drawerIsShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          style="margin-top: 20px"
          ref="drawerPagination"
          :filterField="drawerfilterField"
          @getList="getDrawerTableList"
          :requestUrl="requestDialogUrl"
        ></Pagination>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'
import dialogRefused from '@/components/publicCom/dialogRefused.vue'
export default {
  name: 'salaryPayBatchDetailList',
  mixins: [scrollTable],
  components: {
    dialogRefused,
  },
  data() {
    return {
      titleText: '',
      advanced: false,
      back: true,
      batchNo: '', //工资批次
      statusQuery: '',
      yearQuery: '',
      monthQuery: '',
      salaryId: '',
      projectId: '',
      //表格数据
      tableList: [],
      companyOptions: [], //参建单位
      salaryStatusOptions: [], //发放状态
      employeeStatusOptions: [], //员工确认状态
      requestUrl: '',
      areaId: '', //区域
      //搜索条件
      filterField: {
        salaryId: '', //工资表id
        year: '', //年
        month: '', //月
        status: '', //发放状态
        uscc: '', //参建单位
        groupId: '', //班组Id
        confirmStatus: '', //员工确认状态
        name: '', //姓名
      },
      isShow: false, //列表加载
      loading: true,
      from: '', //从看板过来的工资
      salaryStatistics: {}, //统计数据
      delSalary: '', // 运维端删除工资表
      safeguard: '', //代发维护列表
      canSync: false, //加载中
      syncSalaryBtn: false,
      rejectReason: '', //驳回原因
      isFenbaoManager: false,
      showTask: false,
      userType: '', //用户类型（后台返回的）
      loginType: '', //登录类型
      isShowUpdate: false,
      sysAppCode: '',
      isSH: '', //是否是审核

      directionList: [
        { name: '进场', id: 1 },
        { name: '出场', id: 0 },
        { name: '无方向', id: -1 },
      ],
      inrangeList: [
        { name: '范围内', id: 1 },
        { name: '范围外', id: 0 },
      ],
      formVisible: false,
      drawerfilterField: {
        projectId: '', //项目id
        year: '', //年
        month: '', //月份
        keyword: '', //
        employeeId: '',
        direction: '',
        inRange: '',
      },
      requestDialogUrl: 'api-att/cs/att/expand/attlist',
      drawerIsShow: false,
      drawerLoading: true,
      drawerTableList: [],
      tableCol: [],
      colSetupTableCol: [],
    }
  },
  created() {
    this.sysAppCode = localStorage.getItem('judgeRoleCode')
    if (this.$store.state.accountType == 'FENBAO_MANAGER') {
      this.isFenbaoManager = true
      this.filterField.uscc = this.$store.state.uscc
      this.getUSCC()
    }
    this.$store.commit('SET_INFO', ['groupIdOptions', []])
    this.loginType = localStorage.getItem('loginType')
    this.userType = this.$store.state.userType
    this.from = this.$route.query.from
    this.batchNo = this.$route.query.batchNo
    this.statusQuery = this.$route.query.statusQuery
    this.salaryId = this.$route.query.salaryId
    this.filterField.salaryId = this.$route.query.salaryId
    this.filterField.year = this.$route.query.yearQuery
    this.filterField.month = this.$route.query.monthQuery
    this.projectId = this.$route.query.projectId
    this.yearQuery = this.$route.query.yearQuery
    this.monthQuery = this.$route.query.monthQuery
    this.rejectReason = this.$route.query.rejectReason
    this.isSH = this.$route.query.isSH
    // 运维端删除工资表
    this.delSalary = this.$route.query.delSalary
    this.safeguard = this.$route.query.safeguard
    if (this.delSalary && this.delSalary == 'delSalaryList') {
      this.requestUrl = 'api-su/cs/salarydetail/expand/listforadmin'
    } else if (
      (this.statusQuery == 'OWER_AUDIT' || this.statusQuery == 'JC_AUDIT') &&
      this.isSH == 'SH'
    ) {
      //待建设方审核，待劳动监察审核 返回isException这个字段是1就标红(审核页面跳过来的标红)
      this.requestUrl = 'api-su/cs/salarydetail/expand/auditList'
    } else {
      this.requestUrl = 'api-su/cs/salarydetail/expand/list'
    }

    this.getCompany()
    this.getSalaryStatus() //获取工资发放状态
    this.getEmployeeStatus()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    if (this.loginType == 'JC') {
      this.getSalaryStatistics()
    }
    this.getTableCol()
    this.syncSalaryBtn =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mCsSalaryList:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mCsSalaryList:update') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListSGF:update') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListJSF:update') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('bankSalaryPayList:update') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mCsSalaryList:update') > -1
  },
  computed: {
    ...mapState(['groupIdOptions']),
  },
  methods: {
    /**
     * @description: 获取统计全部项目表头数据
     */
    getTableCol() {
      this.axios({
        method: 'post',
        url: '/api-s/dimension/head',
        data: {
          type: 'SALARY_DETAIL_EXPORT',
          complex: 1,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            let datas = JSON.parse(JSON.stringify(response.data.result))
            datas.forEach((item) => {
              if (
                [
                  '姓名',
                  '身份证号',
                  '工资卡号',
                  '应发工资',
                  '到账工资',
                ].includes(item.label)
              ) {
                item.disabled = true
              }
            })
            this.tableCol = datas
            // this.tableColOne = [];
            // this.tableCol.forEach(item => {
            //     this.tableColOne.push(...item.children);
            // });
            this.colSetupTableCol = datas
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取全部表头失败',
            type: 'error',
          })
        })
    },
    getSelectMenuId(val, newVal) {
      this.headerList = val
      // console.log(val);
      // this.$nextTick(() => {
      //     this.$refs.table.doLayout();
      // });
    },
    seeEmployeeAttendance(row) {
      this.drawerfilterField.employeeId = row.employeeId
      this.drawerfilterField.year = row.year
      this.drawerfilterField.month = row.month
      this.drawerfilterField.keyword = row.keyword
      this.drawerfilterField.projectId = row.projectId
      this.drawerfilterField.direction = ''
      this.drawerfilterField.inRange = ''
      this.formVisible = true
      this.$nextTick(function () {
        this.$refs.drawerPagination.getTableListData()
      })
    },
    //考勤搜索
    searchBrand() {
      this.$refs.drawerPagination.getTableListData()
    },

    getDrawerTableList(data) {
      this.drawerTableList = data
      this.list = []
      this.drawerLoading = false
      for (var i = 0; i < this.drawerTableList.length; i++) {
        this.list.push(this.drawerTableList[i].path)
      }

      // this.oldPicList = this.list;
      for (var i = 0; i < this.drawerTableList.length; i++) {
        // this.list.push(this.drawerTableList[i].path)
        var container = this.list

        var frontArr = container.slice(0, i)
        var behindArr = container.slice(i, this.drawerTableList.length)
        var list = behindArr.concat(frontArr)
        this.drawerTableList[i].list = list
      }

      if (!this.drawerTableList.lenght || this.drawerTableList.lenght < 1) {
        this.drawerIsShow = true
      }
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['searchConditions'].resetFields()
      this.formVisible = false
    },
    //查看详情
    seeEmployeeDetail(employeeId) {
      this.$router.push({
        path: '/home/employee/employeeInfoC',
        name: 'employeeInfoC',
        query: {
          employeeId: employeeId,
          path: 'JC',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeTotalListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions(['getGroupList']),
    /**
     * @description: 银行端确认发放
     */
    submitForm() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/confirmPaySalary',
        data: {
          salaryId: this.salaryId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '确认发放成功',
            })
            //重新加载列表，状态
            this.statusQuery = 'ISSUED'
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
          this.centerDialogVisible = false
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '确认发放失败',
            type: 'error',
          })
          this.centerDialogVisible = false
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        })
    },
    goBack() {
      if (this.loginType == 'QY' || this.loginType == 'XM') {
        this.$router.push({
          path: '/home/salaryDf/companySalaryBatchList',
          name: 'companySalaryBatchList',
          query: {
            projectId: this.projectId,
          },
        })
        //不能缓存，避免工资表上报后页面提示目前开启的审核方，返回工资表详情再返回工资列表缓存问题（列表会新增）
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/salaryDf/companySalaryBatchList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        if (this.delSalary && this.delSalary == 'delSalaryList') {
          this.$router.push({
            path: '/home/delSalary/salaryList',
          })
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/delSalary/salaryList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else if (this.safeguard == 'safeguard') {
          this.$router.push({
            path: '/home/salaryDf/czSalaryPayBatchList',
            query: {
              projectId: this.projectId,
              projectName: this.$route.query.projectName,
            },
          })
          // 这里用缓存从项目看板过来有bug
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/salaryDf/czSalaryPayList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else if (this.$route.query.mark == 'payrollList') {
          var path =
            this.$route.query.taskType == 'salary'
              ? '/home/salaryDf/salaryPayListTabTwo'
              : '/home/salaryDf/salaryPayListTab'
          this.$router.push({
            path: path,
            query: {
              tab: 'payrollList',
              taskType: this.$route.query.taskType,
            },
          })
          this.tabChoose()
        } else {
          this.$router.push({
            path: '/home/salaryDf/salaryPayBatchList',
            query: {
              projectId: this.projectId,
              projectName: this.$route.query.projectName,
              taskType: this.$route.query.taskType,
            },
          })
          this.tabChoose()
        }
      }
    },
    tabChoose() {
      var oldUrl =
        this.$route.query.taskType == 'salary'
          ? '/home/salaryDf/salaryPayListTabTwo'
          : '/home/salaryDf/salaryPayListTab'
      this.$store.commit('GOBACK_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getCompany() {
      //获取参建单位
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/findbyprojectid',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          this.companyOptions = response.data.result || []
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取参建单位数据失败',
            type: 'error',
          })
        })
    },
    getUSCC(value) {
      let uscc = this.filterField.uscc
      if (!uscc) {
        this.filterField.groupId = ''
        this.$store.commit('SET_INFO', ['groupIdOptions', []])
      } else {
        this.getGroupList({
          projectId: this.projectId,
          uscc: this.filterField.uscc,
        })
        this.filterField.groupId = ''
      }
    },
    getSalaryStatus() {
      //获取工资发放状态
      this.axios({
        method: 'post',
        url: 'api-su/cs/salarydetail/expand/status',
        data: {},
      })
        .then((res) => {
          this.salaryStatusOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取工资发放状态数据失败',
            type: 'error',
          })
        })
    },
    getEmployeeStatus() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salarydetail/expand/confs',
        data: {},
      })
        .then((res) => {
          this.employeeStatusOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取员工确认状态数据失败',
            type: 'error',
          })
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
      if (this.loginType == 'JC') {
        this.getSalaryStatistics()
      }
    },
    getSalaryStatistics() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salarydetail/expand/stats',
        data: this.filterField,
      })
        .then((res) => {
          this.salaryStatistics = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取统计数据失败',
            type: 'error',
          })
        })
    },
    exportSalaryPayBatchList() {
      if (this.tableList.length > 0) {
        var fieldArr = []
        for (var i = 0; i < this.tableCol.length; i++) {
          if (this.tableCol[i].isShow == true) {
            fieldArr.push(this.tableCol[i].prop)
          }
        }
        fieldArr = fieldArr.join(',')
        window.location.href =
          common.commonApi +
          'api-su/cs/salarydetail/expand/newSalaryDetailReport?salaryId=' +
          this.filterField.salaryId +
          '&year=' +
          this.filterField.year +
          '&status=' +
          this.filterField.status +
          '&uscc=' +
          this.filterField.uscc +
          '&groupId=' +
          this.filterField.groupId +
          '&confirmStatus=' +
          this.filterField.confirmStatus +
          '&name=' +
          this.filterField.name +
          '&sortField=' +
          this.filterField.sortField +
          '&sort=' +
          this.filterField.sort +
          '&field=' +
          fieldArr +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'warning',
          message: '无数据导出',
        })
      }
    },
    //同步工资表数据
    toSyncSalary() {
      this.canSync = true
      this.axios({
        method: 'post',
        url: '/api-su/bank/editSalaryDetail',
        data: {
          id: this.$route.query.salaryId,
          projectId: this.projectId,
          year: this.$route.query.yearQuery,
          month: this.monthQuery,
          sequenceCode: this.$route.query.sequenceCode,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.canSync = false
              this.$message({
                message: response.data.msg,
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
            } else {
              this.canSync = false
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.canSync = false
          }
        )
        .catch((error) => {
          this.canSync = false
        })
    },
    //审核通过
    toCheckEvent(id, type) {
      this.$confirm('确认审核通过吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.checkRequset()
        })
        .catch(() => {
          //取消
        })
    },
    checkRequset() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/audit',
        data: {
          salaryId: this.salaryId,
          status: 'YES', //通过YES，驳回NO
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              message: '审核通过',
              type: 'success',
            })
            //重新加载列表，状态
            this.statusQuery = res.data.result
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    toRefused() {
      this.showTask = true
    },
    handleCloseArea(val) {
      this.showTask = false
    },
    getStatusQuery(data) {
      this.statusQuery = data[0]
      this.rejectReason = data[1]
      this.$refs.pagination.getTableListData()
    },
    rowStyle({ row, rowIndex }) {
      // isException为1，对工资表中部分标红人员当前行进行标红
      if (
        row.isException === 1 &&
        this.requestUrl === 'api-su/cs/salarydetail/expand/auditList'
      ) {
        return 'color:#f56c6c !important'
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.topContent {
  // background: #e4ebf1;
  height: 50px;
  line-height: 50px;
  padding: 0px 24px;
  .titleTop {
    color: #333333;
    // margin-right: 6px;
    font-weight: bold;
    font-size: 18px;
  }
  .payOffState {
    font-size: 12px;
    padding: 2px 5px;
    margin-left: 8px;
    vertical-align: top;
  }

  /* 失败 */
  .payFail {
    border: 1px solid #d41212;
    color: #d41212;
    background: #f6e6e7;
  }

  /* 待发放 */
  .payOffWait {
    border: 1px solid #5db2ff;
    color: #5db2ff;
    background: #e3f0fc;
  }

  /* 已发放 */
  .issued {
    border: 1px solid #fe9900;
    color: #fe9900;
    background: #fbf1e0;
  }

  /* 待支付 */
  .unPay {
    border: 1px solid #fe9900;
    color: #fe9900;
    background: #fbf1e0;
  }

  /* 已撤销 */
  .annuled {
    border: 1px solid #a0a0a0;
    color: #a0a0a0;
    background: #e5e5e5;
  }
}
.topContentRejected {
  height: 85px;
}
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 198px;
}
.mainConRejected {
  top: 224px;
}
// 数据统计
.statistics {
  padding: 24px;
  // padding-top: 0;
  background: #f5f7fb;
  margin: 0 24px 22px;
  li {
    height: 24px;
    line-height: 24px;
    float: left;
    margin-right: 50px;
    font-size: 16px;
    color: #999;
    span {
      font-size: 18px;
      color: #009588;
      font-weight: 550;
    }
  }
  .name {
    font-size: 16px;
    color: #333333;
    margin-right: 50px;
    float: left;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1440px) {
  .statistics li {
    margin-right: 25px;
  }
}
.rejectedReason {
  font-size: 14px;
  line-height: 14px;
  margin-top: 12px;
  padding-left: 30px;
  color: #d41212;
}
.opetateBut {
  text-align: right;
  .check,
  .reject {
    padding: 0 24px;
  }
  .reject {
    background: #db534b !important;
    border-color: #db534b !important;
  }
}
.alignRight {
  text-align: right;
}
.rejectedSty {
  height: 85px;
  width: 100%;
  line-height: 1;
  padding: 16px 0;
  position: relative;
  &:after {
    position: absolute;
    right: -24px;
    top: 85px;
    left: -24px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e3e7e9;
    z-index: 10;
  }
}

.statuSty {
  height: 50px;
  width: 100%;
  position: relative;
  &:after {
    position: absolute;
    right: -24px;
    top: 50px;
    left: -24px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e3e7e9;
    z-index: 10;
  }
}
.colSetupBottom {
  margin-bottom: 24px;
  float: left;
  .colSetupBtn {
    float: left;
    margin-right: 14px;
  }
}
.el-table /deep/ .el-link.el-link--primary {
  margin-right: 0 !important;
}
</style>
